<template>
  <div>{{ Math.random() }}</div>
  <div>{{ Test.a }}</div>
  <button :disabled="true">值为 true - 禁用</button>
  <button :disabled="''">空字符串 - 禁用</button>
  <button :disabled="'hello'">非空字符串 - 禁用</button>

  <button :disabled="false">值为 false - 启用</button>
  <button :disabled="null">值为 null - 启用</button>
  <button :disabled="undefined">值为 undefined - 启用</button>
  <button :disabled="0">数字为0 - 启用</button>

  <!-- 如果想要绑定多个属性，可以直接绑定成一个对象 -->
  <div v-bind="attrObj">绑定多个属性</div>

  <div>{{ number++ }}</div>
  <div>{{ ok ? '上班' : '下班' }}</div>
  <div>{{ message.split('').reverse().join('') }}</div>
  <div :id="`list-${id}`">{{ id+100 }}</div>
</template>

<script setup>
  const attrObj = {
    id: "container",
    class: "wrapper"
  }

  const number = 1, ok = true
  const message = 'hello'
  const id = 1
</script>

<style lang="scss" scoped></style>
